<template>
  <div id="tab">
    <el-scrollbar
      style="width:100%;height:100%;white-space: nowrap;"
      @mousewheel.native="wheel"
      ref="databar"
    >
    <!-- 滚动条组件 -->
      <div
        v-for="(item, index) in tags"
        :key="index"
        class="tabstyle"
        @click="designatedTag(index, item)"
        ref="teg"
        :class="[tegIndex == index ? 'color' : '']"
        @contextmenu.prevent="myFunction(index, $event)"
        style="cursor:pointer"
      >
      <!-- 选择的内容 -->
        {{ item.text }}
        <i
          class="el-icon-circle-close icon"
          @click.stop="deleteTag(item, index)"
        ></i>
      </div>
    </el-scrollbar>
    <ul class="tabul" ref="tabul" v-show="panelShow">
      <!-- 右击出现选项框 -->
      <li @click.stop="refresh(item, index)">刷新</li>
      <li @click.stop="deleteTag(item, index)">关闭</li>
      <li @click.stop="deleteElse(item, index)">关闭其他</li>
      <li @click.stop="deleteAll()">关闭所有</li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ["tags"],
  data() {
    return {
      panelShow: false, //隐藏显示
      tegIndex: 0, //导航标签的下标
      x: 0, //发生事件的地点在事件源元素的坐标系统中的 x 坐标
      y: 0, //发生事件的地点在事件源元素的坐标系统中的 y 坐标
      item: "", //获取右击的数据
      index: "", //获取右击的下标
    };
  },

  mounted() {
    document.addEventListener("click", (e) => {
      //隐藏右边的东西
      if (e.target.className != "tabul") {
        //判断点击的地方的clss类名是不是右边的clss类
              this.panelShow = false
        
      }
    });
  },
  methods: {
    wheel(e) {
      //滚动事件
      e = e || window.event;
      if (e.wheelDelta) {
        if (e.wheelDelta < 0) {
          //控制滚动的方向
          //向下
          this.$refs.databar.wrap.scrollLeft -= 20;
        } else {
          this.$refs.databar.wrap.scrollLeft += 20;
        }
      }
    },
    designatedTag(index, item) {
      //点击改变样式和跳转路由
      if (this.tegIndex != index) {
        //判断点击的是不是自己
        this.tegIndex = index;
        this.$router.push(item.index); //跳转的路由
      }
    },
    myFunction(index, event) {
      //控制右边的东西的位置
      //右击事件
      this.index = index;
      this.item = this.tags[index];
      this.x = event.clientX;
      this.y = event.clientY;
      // this.$refs.tabul.style.display = "block";
      this.panelShow = true
      this.$refs.tabul.style.top = this.y + "px";
      this.$refs.tabul.style.left = this.x + "px";
    },
    deleteTag(item, index) {
      //删除对应的标签
      this.panelShow = false//隐藏右击的东西
      let _this = this; //改变this的指向

      _this.tags.splice(index, 1); //删除
      if (_this.tegIndex != index) {
        //判断点击的是不是自己
        if (_this.tegIndex > index) {
          _this.tegIndex = _this.tegIndex - 1;
        }
      } else {
        if (item.text == "首页") {
          //判断删除的是不是首页
          if (_this.tags.length < 1) {
            //判断首页是最后一个
            _this.tags.splice(index, 1);
          }
        } else if (_this.tags.length == 0) {
          //  {
          //删除最后一个数组中数据时，添加首页
          _this.tegIndex = 0;
          _this.tags.push({ text: "首页", index: "/homepage" });
          _this.$router.push("/homepage");
          // }
        } else if (index == _this.tags.length) {
          //判断删除的是最后面数据
          _this.tegIndex = index - 1;
          _this.$router.push(_this.tags[_this.tegIndex].index);
        } else {
          _this.$router.push(_this.tags[index].index);
        }
      }
    },
    deleteElse() {
      //删除其他
       this.panelShow = false//隐藏右击的东西
      let quantity = this.tags.length; //存储一个数组长度
      for (let i = 0; i < quantity; i++) {
        //全部删除数据
        this.tags.shift();
      }
      this.tags.push(this.item); //添加选中的数据
      this.tegIndex = 0;
      this.$router.push(this.item.index);
    },
    deleteAll() {
      //全部删除
       this.panelShow = false
      let quantity = this.tags.length; //存储一个数组长度
      for (let i = 0; i < quantity; i++) {
        //全部删除数据
        this.tags.shift();
      }
      this.tags.push({ text: "首页", index: "/homepage" }); //添加选中的数据
      this.tegIndex = 0;
      this.$router.push("/");

    },
    refresh() {
      //刷新
      let _this = this; //改变this指向
       this.panelShow = false
      _this.$router.push({
        path: "/emptypage",
        query: {
          id: _this.item.index,
        },
      }); //路由跳转
    },
    monitor(data) {
      //路由监听
      
      for (let i in this.tags) {
        if (this.tags[i].index == data.path) {
          //监听对应的路由的选中样式
          this.tegIndex = i;
        }
      }
    },
  },
  watch: {
    $route: "monitor",
  },
};
</script>

<style>
/* 隐藏tad滚动条 */
.el-scrollbar__bar {
  display: none !important;
}
.el-scrollbar__thumb {
  display: none!important;
}
</style>
<style lang="less" scoped>
ul,
li {
  list-style: none;
  margin: 0;
}
#tab {
  width: 100%;
}
.tabstyle {/*选择的内容*/
  width: max-content;
  font-size: 15px;
  color: #409eff;
  background-color: #ecf5ff;
  border-radius: 4px;
  padding: 5px 12px;
  display: inline-block;
  margin-left:10px;
  border: 1px solid rgb(145, 192, 240);
  position: relative;
}
.tabul {/*右边选择框样式*/
  width: max-content;
  font-size: 13px;
  text-align: center;
  color: black;
  background-color: #fff;
  border-radius: 4px;
  position: absolute;
  z-index: 100;
  border: 1px solid rgb(134, 159, 184);
}
.tabul > li {
  width: 60px;
  line-height: 20px;
  padding-bottom: 5px;
}
.tabul li:hover {
  background-color: #de5448;
}
.icon {/*圆角边*/
  border-radius: 50%;
}
.icon:hover {/*悬停删除键变样式*/
  background-color: #de5448;
  box-shadow: 0px 0px 3px 3px rgb(240, 13, 62);
}
.show {
  display: block;
}
.color {/*三目运算的样式*/
  background-color: #0BADF9;
  color: #fff;
}
</style>
